<template>
  <div class='com-search pr'>
    <div class="w1200 com-s-input-box">
      <img :src="search_logo" alt="search_logo">
      <el-input placeholder="" class="search-input" clearable>
      </el-input>
      <el-button class="search-btn" @click="doSearch">搜索</el-button>
      <!-- <el-button class="quick-btn" @click="doQuick">快速求购</el-button> -->
      <img :src="qcode" alt="qcode" class="qcode">
    </div>

    <div class="w1200 com-s-select-box">
      <comSelect/>
    </div>
  </div>
</template>
<script>
import comSelect from './select.vue'
export default {
  components: {comSelect},
  name: "",
  data() {
    return {
      search_logo:require('@/assets/imgs/homepage/search_logo.png'),
      qcode:require('../../assets/imgs/homepage/code.jpg'),
    };
  },
  methods: {
    /**
     * @name 搜索
     */
    doSearch(){
      console.log('搜索');
      
    },

    /**
     * @name 快速求购
     */
    doQuick(){
      console.log('快速求购');
    }

  },
  created() {}
};
</script>
<style lang="scss" scoped>
.com-search {
  border-bottom: 1px solid $blue;

  .com-s-input-box{
    margin: 12px auto;
    display: flex;
    box-sizing: border-box;

    img.search_logo{
      width: 250px;
      height: 60px;
    }
    .search-input{
      margin: 10px 80px;
      margin-right: 0;
    }
    .quick-btn,.search-btn{
      height: 40px;
      margin-top: 10px;
      margin-right: 100px;
      border-color: $blue;
      border-radius: 0;
      color: $blue;
    }
    .search-btn{
      background-color: $blue;
      color: #fff;
      min-width: 100px;
      margin-right: 40px;
    }
    .qcode{
      height: 50px;
      margin: 5px;
    }
  }
}
</style>